<template>
  <div>
    <!-- 模块1--页头--搜索 -->
    <!-- 布局组件--van-row -->
    <div class="search-top">
      <van-row class="top-search">
        <van-col span="2">
          <!-- 顶部导航 -->
          <van-nav-bar left-arrow @click-left="onClickLeft" />
        </van-col>
        <van-col span="22">
          <!-- 搜索组件 -->
          <van-search v-model="keyword" show-action placeholder="请输入搜索关键词" @search="onSearch">
            <template #action>
              <div @click="onSearch(keyword)">搜索</div>
            </template>
          </van-search>
        </van-col>
      </van-row>
    </div>
    <!-- 模块2--历史搜索 -->
    <div class="history-search">
      <div class="top">
        <h1>历史搜索</h1>
        <span>
          <van-icon name="delete-o" @click="onDelete"/>
        </span>
      </div>
      <ul>
        <li 
        v-for="(item,index) in  historyKeywordList" 
        :key="index"
        @click="onSearch(item)"
        >{{item}}</li>
      </ul>
    </div>
    <!-- 模块3--搜索发现 -->
    <div class="search-find">
      <div class="top">
        <h1>搜索发现</h1>
        <!-- <van-icon name="browsing-history" /> -->
      </div>
      <ul>
        <li v-for="(item,index) in  hotKeywordList" 
        :key="index"
        @click="onSearch(item.keyword)"
        >{{item.keyword}}</li>
      </ul>
    </div>
    <!-- 易购热搜 -->
    <div class="search-hot">
      <div class="title">
        <h1>
          <span>
            <van-icon name="fire-o" color="#ee0a24" />
          </span> 易购热搜
        </h1>
      </div>
      <div class="pro">
        <van-grid
          direction="horizontal"
          :column-num="2"
          v-for="item in hotGoodsList"
          :key="item.id"
        >
          <van-grid-item :icon="item.list_pic_url" :text="item.name" />
          <van-grid-item :icon="item.list_pic_url" :text="item.name" />
        </van-grid>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { homeBanner } from "@/api/home.js";
import { search } from "@/api/search.js";
// 清除历史记录接口
import { clearHistory } from "@/api/search.js";
// 搜索窗口数据
import { searchWindow } from "@/api/search.js";
export default {
  data() {
    return {
      hotGoodsList: [],
      keyword: "", //搜索关键字
      historyKeywordList: [], //历史记录数据
      hotKeywordList: [] //搜索发现数据
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },

    // 点击搜索获取数据
    onSearch(keyword) {
      this.$router.push({ path: "/search/list", query: { keyword } });
    },
    // 清除历史记录
    async onDelete() {
      // alert('111')
      let res = await clearHistory();
      let data=res.data
      this.historyKeywordList=data.data
      console.log(data);
    }
  },
  async created() {
    // 调用banner数据接口
    let res = await homeBanner(); //调接口获取热搜数据
    let data = res.data;
    this.hotGoodsList = data.data.newGoodsList;

    let res1 = await searchWindow();
    let data6 = res1.data.data;
    console.log("搜索数据：", data6);
    let data1 = res1.data.data.historyKeywordList; //历史搜索记录数据
    this.historyKeywordList = data1;

    let data2 = res1.data.data.hotKeywordList; //搜索发现数据
    this.hotKeywordList = data2;
    console.log( this.hotKeywordList);

    // let res2 = await clearHistory();
    // console.log("clearhistory", res2);
  }
};
</script>

<style lang="scss">
body {
  padding: 0.2rem;
}
.search-top {
  // 模块1--页头--搜索
  .van-search__action div {
    text-align: center;
    width: 1rem;
    height: 0.6rem;
    background: #ee9119c5;
    border-radius: 0.2rem;
    color: #fff;
  }
}

// 模块2--历史搜索
.history-search {
  margin-bottom: 0.3rem;
  .top {
    display: flex;
    justify-content: space-between;

    h1 {
      font-size: 0.32rem;
      margin-bottom: 0.2rem;
    }
    .van-icon {
      padding-right: 0.8rem;
      font-size: 0.36rem;
    }
  }
  ul {
    display: flex;
    flex-wrap: wrap; //允许换行
    li {
      margin-right: 0.1rem;
      padding: 0.05rem;
      background: #f4f4f4;
      margin-bottom: 0.1rem;
      border-radius: 0.1rem;
      font-size: 0.28rem;
    }
  }
}
// 模块3--搜索发现
.search-find {
  margin-bottom: 0.3rem;

  .top {
    h1 {
     font-size: 0.32rem;
      margin-bottom: 0.2rem;
    }
  }
  ul {
    display: flex;
    flex-wrap: wrap;
    li {
      margin-right: 0.1rem;
      padding: 0.05rem;
      background: #f4f4f4;
      margin-bottom: 0.2rem;
      border-radius: 0.2rem;
       font-size: 0.28rem;
    }
  }
}
// 模块4--易购热搜专栏
.search-hot {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  width: 100%;
  height: 100%;
  border: 1px solid orange;
  border-bottom: 0px solid orange;

  .title {
    line-height: 0.6rem;
    padding-left: 0.2rem;
    background-image: linear-gradient(170deg, #fae6df, #fff);
    // background-image: linear-gradient(45deg,#FAE6DF,#fff);
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    h1 {
      color: #e96150;
      font-size: 0.36rem;
    }
  }
  .van-grid {
    height: 70px;
  }
}
</style>